<template>
	<sc-form
		ref="formRef"
		v-model="form"
		:config="config"
		:loading="loading"
		@search="handleSearch"
		@reset="handleReset"
		@submit="handleSubmit"
		@change="handleFormEvent('change', $event)"
		@clear="handleFormEvent('clear', $event)"
	>
	</sc-form>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({ businessType: 'beijing' })
const loading = ref(false)

const internalInstance = getCurrentInstance()
const api = (internalInstance?.proxy as { $API?: any })?.$API
console.log('api', api)

const tableColumns = [
	{ prop: 'id', label: '编号' },
	{ prop: 'user', label: '用户' },
	{ prop: 'mobile', label: '手机号' }
]

const cityOptions = [
	{ label: '北京', value: 'beijing' },
	{ label: '上海', value: 'shanghai' },
	{ label: '广州', value: 'guangzhou' }
]

const cascaderOptions = [
	{
		value: 'zhejiang',
		label: '浙江',
		children: [
			{
				value: 'hangzhou',
				label: '杭州',
				children: [
					{ value: 'westLake', label: '西湖' },
					{ value: 'xixi', label: '西溪' }
				]
			}
		]
	}
]

const interestOptions = [
	{ label: '阅读', value: 'reading' },
	{ label: '旅行', value: 'travel' },
	{ label: '运动', value: 'sports' }
]

const radioOptions = [
	{ label: '男', value: 'male' },
	{ label: '女', value: 'female' }
]

const config = ref<any>({
	labelWidth: '100px',
	labelPosition: 'right',
	size: 'default',
	mode: 'search',
	span: 6,
	formItems: [
		{
			label: '关键字',
			name: 'keyword',
			value: '',
			component: 'input',
			attrs: {
				maxlength: 20,
				clearable: true,
				prefixIcon: 'el-icon-search'
			},
			itemProps: {
				required: true
			},
			events: {
				input: (value: string) => console.log('[config.events] keyword input:', value)
			}
		},
		{
			label: '业务类型',
			name: 'businessType',
			// value: 'shanghai',
			component: 'select',
			options: {
				items: cityOptions
			},
			attrs: {
				filterable: true,
				collapseTags: true
			},
			itemProps: {
				rules: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
				required: true
			}
		},
		{
			label: '虚拟滚动',
			name: 'businessType2',
			value: ['beijing'],
			component: 'select-v2',
			options: {
				items: cityOptions
				//    remote: {
				// 	api: api.log.opLogList,
				// 	data: { data: {} },
				// 	transform: (data) => data.map((item) => ({
				// 		label: item.realName,
				// 		value: item.realName
				// 	}))
				// 	}
			},
			attrs: {
				filterable: true,
				collapseTags: true,
				multiple: true
			},
			itemProps: {
				rules: [{ required: true, message: '请选择业务类型&&&&11111', trigger: 'change' }],
				required: true
			}
		},
		{
			label: '所属地区',
			name: 'region',
			value: [],
			component: 'cascader',
			options: {
				items: cascaderOptions
			},
			itemProps: {
				required: true
			},
			attrs: {
				props: { expandTrigger: 'hover', checkStrictly: true, showPrefix: false, checkOnClickNode: true }
			}
		},
		{
			label: '所属地区1',
			name: 'region1',
			value: [],
			component: 'cascader',
			options: {
				items: cascaderOptions
			},
			itemProps: {
				required: true
			},
			attrs: {
				props: { expandTrigger: 'hover', checkStrictly: true, showPrefix: false, checkOnClickNode: true }
			}
		},
		{
			label: '兴趣爱好',
			name: 'hobbies',
			value: [],
			component: 'checkbox-group',
			options: {
				items: interestOptions
			},
			attrs: {
				min: 1,
				max: 2
			}
		},
		{
			label: '性别',
			name: 'gender',
			value: 'male',
			component: 'radio',
			options: {
				items: radioOptions
			},
			attrs: {
				size: 'large'
			}
		},
		{
			label: '是否启用',
			name: 'enabled',
			value: true,
			component: 'switch',
			attrs: {
				activeText: '启用',
				inactiveText: '禁用'
			}
		},
		{
			label: '评分',
			name: 'score',
			value: 3,
			component: 'rate',
			attrs: {
				showScore: true,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900']
			}
		},
		{
			label: '预估预算',
			name: 'budget',
			value: 10,
			component: 'slider',
			attrs: {
				min: 0,
				max: 100,
				showStops: true,
				marks: {
					0: '0',
					50: '50',
					100: '100'
				}
			}
		},
		{
			label: '申请时间',
			name: 'applyRange',
			value: '',
			component: 'date-picker',
			attrs: {
				type: 'daterange',
				valueFormat: 'YYYY-MM-DD',
				startPlaceholder: '开始日期',
				endPlaceholder: '结束日期'
			}
		}
		// { component: 'empty' },
		// { component: 'empty' }
	]
})

const handleSearch = (payload: Record<string, any>) => {
	console.log('[sc-form search]', payload)
	console.log('formRef.value', formRef.value)
}

const handleSubmit = (payload: Record<string, any>) => {
	console.log('[sc-form submit]', payload)
	console.log('formRef.value', formRef.value)
}

const handleReset = () => {
	console.log('[sc-form reset]')
	// formRef.value?.resetFields?.()
	console.log('formRef.value', formRef.value)
}

const handleFormEvent = (eventName: any, payload: any) => {
	console.log(`[sc-form ${eventName}]`, payload)
}
</script>

<style scoped></style>
